<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css">
    <style>
        .input-lin{display:inline;width:auto;margin-right:10px;}
        .input-row-line{margin-bottom:10px;}
    </style>
</head>
<body>
    <ul class="layui-nav" lay-filter="main">
        <li class="layui-nav-item layui-this"><a href="javascript:;" data-id="1">签名生成</a></li>
        <li class="layui-nav-item"><a href="javascript:;" data-id="2">地址列表</a></li>
    </ul>

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show" id="r1">
            <div class="layui-row">
                <div class="layui-col-md5">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">输入地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="url" placeholder="请输入URL" autocomplete="off" class="layui-input" id="url_input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">待签名值</label>
                            <div class="layui-input-block">
                                <input type="text" name="sorted" readonly autocomplete="off" class="layui-input" id="sorted_param_input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">SEC_KEY</label>
                            <div class="layui-input-block">
                                <input type="text" name="key" autocomplete="off" class="layui-input" id="secret_key_input" value="">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">签名</label>
                            <div class="layui-input-block">
                                <input type="text" name="sign" readonly autocomplete="off" class="layui-input" id="sign_input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">完整链接</label>
                            <div class="layui-input-block">
                                <input type="text" name="fullUrl" readonly autocomplete="off" class="layui-input" id="full_url_input">
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">参数</label>
                                <div id="param-container">
                                    <div class="layui-input-block input-row-line">
                                        <label class="layui-inline">key:</label><input type="text" name="param" placeholder="param" autocomplete="off" class="layui-input input-lin" value="timestamp" readonly>
                                        <label class="layui-inline">value:</label><input type="text" name="value" placeholder="value" autocomplete="off" class="layui-input input-lin" id="time_input" readonly>
                                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary btn-time"><i class="layui-icon">&#xe669;</i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button id="add-param-btn" type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe654;</i>
                                </button>
                                <button id="gen-param-btn" type="button" class="layui-btn layui-btn-sm">
                                    <i class="layui-icon">&#xe9aa;</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-col-md3"></div>
            </div>

        </div>
        <div class="layui-tab-item" id="r2">....</div>
    </div>

<script src="plugins/layui/layui.js"></script>
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/md5/MD5.js"></script>
<script>
    function createHtm(param) {
        var htm = '<div class="layui-input-block input-row-line">'+
            '<label class="layui-inline">key:</label><input type="text" name="param" placeholder="param" autocomplete="off" class="layui-input input-lin" value="'+(param?param.name:'')+'"> '+
            '<label class="layui-inline">value:</label><input type="text" name="value" placeholder="value" autocomplete="off" class="layui-input input-lin" value="'+(param?param.value:'')+'"> '+
            '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary btn-del"><i class="layui-icon">&#xe640;</i></button> '+
            '</div>';
        return htm;
    }

    function sortParamName(func) {
        var params = {};
        var sortedParam = {};
        var keys = "";
        $('.input-row-line').each(function (i) {
            var key = $(this).find('input[name="param"]').val();
            if(!key){
                return false;
            }
            var val = $(this).find('input[name="value"]').val();
            if(i==0){
                keys += key;
            }else{
                keys += " "+key;
            }
            params[key] = val;
        });

        if(!keys){
            return params;
        }


        // 参数名排序
        var sortedParamName = Array.prototype.sort.call(keys.split(/\s+/gi),function(a,b){
            return a.localeCompare(b);
        });

        // 重新组织参数
        for(var i in sortedParamName){
            var key = sortedParamName[i];
            sortedParam[key] = params[key];
        }
        func(sortedParam);
    }

    // 生成签名
    function genSign(sortedParam) {
        var secretKey = $('#secret_key_input').val();
        var paramStr = "";
        for(var k in sortedParam){
            paramStr += k+sortedParam[k];
        }
        paramStr = secretKey+paramStr+secretKey;
        $('#sorted_param_input').val(paramStr);
        var sign = md5(paramStr);
        $('#sign_input').val(sign);
        $('#full_url_input').val($.param(sortedParam)+"&sign="+sign);
    }

    function getParams(url) {
        var theRequest = new Object();
        if (!url)
            return theRequest;
        if (url.indexOf("?") !== -1)
        {
            var str = url.substr(url.indexOf("?") + 1) + "&";
            var strs = str.split("&");
            for (var i = 0; i < strs.length - 1; i++)
            {
                var key = strs[i].substring(0, strs[i].indexOf("="));
                var val = strs[i].substring(strs[i].indexOf("=") + 1);
                theRequest[key] = val;
            }
        }
        return theRequest;
    }

    //主动加载jquery模块
    layui.use([ 'element','form','layer'], function(){
        var $ = layui.$,ele = layui.element,layer = layui.layer;
        // 初始化时间戳
        $('#time_input').val(new Date().getTime());

        ele.on('nav(main)', function(elem){
            var clickId = elem.data('id');
            $('#r'+clickId).addClass('layui-show').siblings().removeClass('layui-show');
        });

        // 添加参数按钮
        $('#add-param-btn').click(function () {
            $('#param-container').append(createHtm());
        });

        // 生成签名按钮
        $('#gen-param-btn').click(function () {
            sortParamName(genSign);
        });

        // 获取地址栏参数并展示
        $('#url_input').on('blur',function () {
            var url = $(this).val();
            var param = getParams(url);
            var keys = [];
            $('#param-container :text[name="param"]').each(function () {
                keys.push($(this).val());
            });
            for(var k in param){
                if($.inArray(k,keys)==-1){
                    $('#param-container').append(createHtm({name:k,value:param[k]}));
                }
            }
        });

        $('body').on('focus',':text',function () {
            $(this).select();
            if(document.execCommand('copy', false, null) && $(this).val()){
                layer.msg('data copied',{time:1000,anim: 5});
            }
        });

        // 删除参数
        $('#param-container').on('click','.btn-del',function () {
            $(this).closest('div').remove();
        });

        // 刷新时间戳
        $('#param-container').on('click','.btn-time',function () {
            $('#time_input').val(new Date().getTime());
        });

        $('#full_url_input,#url_input,#sign_input,#sorted_param_input').focus(function () {
            $(this).select();
        });

    });


</script>
</body>
</html>